<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Wireframe</title>
		<link rel="stylesheet" href="./jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css">
		<link rel="stylesheet" href="./bootstrap/css/bootstrap.css" type="text/css">
		<link rel="stylesheet" href="./datatables/media/css/jquery.dataTables.css" type="text/css">
		<script type="text/javascript" language="javascript" src="./jquery/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" language="javascript" src="./bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" language="javascript" src="./datatables/media/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			$(document).ready(function()
			{			
				$('#bill-table').dataTable({
					"fnDrawCallback": function ( oSettings ) {
							if ( oSettings.aiDisplay.length == 0 )
							{
								return;
							}
							
							var nTrs = $('tbody tr', oSettings.nTable);
							var iColspan = nTrs[0].getElementsByTagName('td').length;
							var sLastGroup = "";
							for ( var i=0 ; i<nTrs.length ; i++ )
							{
								var iDisplayIndex = oSettings._iDisplayStart + i;
								var sGroup = oSettings.aoData[ oSettings.aiDisplay[iDisplayIndex] ]._aData[0];
								if ( sGroup != sLastGroup )
								{
									var nGroup = document.createElement( 'tr' );
									var nCell = document.createElement( 'td' );
									nCell.colSpan = iColspan;
									nCell.className = "group";
									nCell.innerHTML = sGroup;
									nGroup.appendChild( nCell );
									nTrs[i].parentNode.insertBefore( nGroup, nTrs[i] );
									sLastGroup = sGroup;
								}
							}
						},
						"aoColumnDefs": [
							{ "bVisible": false, "aTargets": [ 0 ] },
							{ "bSortable": false, "aTargets": [ 3 ]}
						],
						"aaSortingFixed": [[ 0, 'asc' ]],
						"aaSorting": [[ 1, 'asc' ]],
						"sDom": 'lfr<"giveHeight"t>ip'
				});
			});
		</script>
	</head>
	<body>
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container" style="width: auto;">
					<div class="container">
						<ul class="nav pull-left">
							<li>
								<a href="./index.html">Home</a>
							</li>
							<li class="active">
								<a href="./bills.html">Bills</a>
							</li>
							<li>
								<a href="./vendors.html">Vendors</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">
									Account
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu">
									<li><a href="./billhistory.html">Bill History</a></li>
									<li><a href="./userprofile.html">Edit Profile</a></li>
									<li><a href="./editvendors.html">Edit Vendors</a></li>
									<li><a href="./paymentaccounts.html">Edit Payment Accounts</a></li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="span12 ui-corner-all">
					<div class="well">
						<h1>Your Bills</h1>
						<table id="bill-table">
							<thead>
								<tr>
									<th>Vendor</th>
									<th>Date Due</th>
									<th>Description</th>
									<th>Status</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Edision</td>
									<td>01/01/2012</td>
									<td>Electic Bill</td>
									<td>Pending</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>Edision</td>
									<td>01/01/2012</td>
									<td>Fee</td>
									<td>Pending</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>HOA</td>
									<td>01/01/2012</td>
									<td>Monthly Bill</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>HOA</td>
									<td>01/01/2012</td>
									<td>Cake</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>HOA</td>
									<td>01/01/2012</td>
									<td>Fine</td>
									<td>Unpaid</td>
									<td><a class="btn">Pay</a></td>
								</tr>
								<tr>
									<td>IVC</td>
									<td>01/01/2012</td>
									<td>Small Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>IVC</td>
									<td>01/01/2012</td>
									<td>Less Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>IVC</td>
									<td>01/01/2012</td>
									<td>Tiny Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/01/2012</td>
									<td>Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/01/2012</td>
									<td>More Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/01/2012</td>
									<td>Extra Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/04/2012</td>
									<td>Book Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/05/2012</td>
									<td>Student Fees</td>
									<td>Pending</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/06/2012</td>
									<td>Parking Fees</td>
									<td>Unpaid</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
								<tr>
									<td>CSULB</td>
									<td>01/07/2012</td>
									<td>Crazy Fees</td>
									<td>Pending</td>
									<td><a class="btn" href="./payvendor.html">Pay</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>